<template>
  <div class="bgbox">
    <div class="loginbox">
      <p>学生登录</p>
      <div class="inpbox studentID">
        <input v-model="studentid" placeholder="请输入学号" type="text" />
      </div>
      <div class="inpbox password">
        <input v-model="pwd" ref="pwdinput" placeholder="请输入密码" :type="passType" />
        <span class="behindbox">
          <i @click="changeVisual" v-show="visual == 0">&#xe609;</i>
          <i @click="changeVisual" v-show="visual == 1">&#xe661;</i>

          <em class="forgetPwd">忘记密码？</em>
        </span>
      </div>
      <div class="btnbox" style="margin-top: 20px">
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject } from 'vue'
// import { ElMessage } from 'element-plus' 不用引入直接调用 避免样式渲染失效

import api from '@/request/api'
const axios = inject('axios')

import { useRouter } from 'vue-router'
const router = useRouter()

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar } = storeToRefs(user)

// 默认不可视密码
let visual = ref(0)
let passType = ref('password')
let studentid = ref('')
let pwd = ref('')
let pwdinput = ref(null)

onMounted(() => {
  // 监听键盘按下弹起事件
  window.addEventListener('keyup', keyUp)
})

onUnmounted(() => {
  window.removeEventListener('keyup', keyUp, false)
})

const keyUp = (e) => {
  //如果是回车则执行登录方法
  if (e.keyCode == 13) {
    login()
  }
}

// 密码框可视切换
function changeVisual() {
  visual.value == 0 ? (visual.value = 1) : (visual.value = 0)
  visual.value == 0 ? (passType.value = 'password') : (passType.value = 'text')
}

async function login() {
  // 未输入账号
  if (!studentid.value) {
    showMessage('warning', '请输入登录账号')
    return
  }

  // 未输入密码
  else if (!pwd.value) {
    showMessage('warning', '请输入密码')
    pwdinput.value.focus()
    return
  }

  let logindata = {
    username: studentid.value,
    password: pwd.value
  }
  let res = await axios.post(api.applogin, logindata)
  console.log(res)
  if (res.code == -1) {
    showMessage('error', res.msg)
  } else {
    // 保存登录信息
    user.$patch({
      logindata: res.data
    })

    // 请求个人信息数据
    let info = await axios.post(api.myinfo, { uid: res.data.id })
    if (info.code == 0) {
      showMessage('success', res.msg)
      user.$patch({
        account: studentid.value,
        userInfo: info.data
      })

      router.replace({
        name: 'Index'
      })
    } else {
      showMessage('error', '用户信息查询失败')
    }
  }
}

// 信息提示
const showMessage = (msgtype, msgstr) => {
  ElMessage({
    showClose: true,
    message: msgstr,
    type: msgtype
  })
}
</script>

<style scoped>
.bgbox {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f2f4f7;
}

.loginbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  overflow: hidden;
  box-shadow: 0 0 20px 0 rgba(175, 187, 204, 0.15);
  background: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.loginbox p,
.loginbox div {
  width: 360px;
  height: 48px;
  line-height: 48px;
}

.loginbox p {
  width: 200px;
  text-align: center;
  font-size: 20px;
  color: #181e33;
  border-bottom: 2px solid #3a8bff;
  margin: 50px auto;
}

.loginbox div {
  margin: 14px auto;
}

.loginbox input {
  width: 100%;
  height: 48px;
  vertical-align: top;
  background: #ffffff;
  border: 1px solid #d4d6d9;
  outline: none;
  font-size: 14px;
  color: #181e33;
  -webkit-border-radius: 24px;
  border-radius: 24px;
  padding: 0 24px 0 54px;
  box-sizing: border-box;
}

.loginbox .inpbox {
  position: relative;
}

.loginbox .studentID::before,
.loginbox .password::before {
  position: absolute;
  top: 0px;
  left: 20px;
  display: block;
  font-family: 'iconfont' !important;
  font-size: 25px;
  color: #afc5cc;
}

.loginbox .studentID::before {
  content: '\e606';
}

.loginbox .password::before {
  left: 23px;
  content: '\ea32';
  font-size: 20px;
}

.btnbox {
  position: relative;
  margin-top: 20px;
}

.loginbox button {
  width: 360px;
  height: 48px;
  background: linear-gradient(to right, #68abff, #7578ff);
  background-size: cover;
  box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.3);
  border-radius: 24px;
  font-size: 18px;
  color: #ffffff;
  outline: none;
  cursor: pointer;
  border: none;
}

.loginbox button:hover {
  opacity: 0.85;
}

.behindbox {
  position: absolute;
  top: 0px;
  right: 20px;
  width: 100px;
  height: 100%;
}

.behindbox i {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  line-height: 50px;
  font-family: 'iconfont' !important;
  font-size: 20px;
  color: #afc5cc;
  cursor: pointer;
}

.forgetPwd {
  float: right;
  font-size: 13px;
  color: #afc5cc;
  cursor: pointer;
}
</style>
